<template>
  <div class="home-banner">
    <XtxCarousel :sliders='sliders' autoplay />
  </div>
</template>
<script lang="ts">
export default {
  name: 'HomeBanner'
}
</script>
<script setup lang="ts">
import { findBanner } from "@/api/home"
import { sliderType } from "@/types/resultsType"
import { ref } from 'vue'

const sliders = ref<sliderType[]>([])
findBanner().then(({ result }) => {
  sliders.value = result
})
</script>
<style scoped lang="less">
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  :deep(.xtx-carousel) {
        .carousel-btn.prev {
          left: 270px;
        }
        .carousel-indicator {
          padding-left: 250px;
        }
    }
}
</style>